<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    ul {
      width: 800px;
      height: 800px;
      margin: 20px auto;
      background: skyblue;
      display: flex;
      /* 主轴方向 
      row（默认值）：主轴为水平方向，起点在左端。
      row-reverse：主轴为水平方向，起点在右端。
      column：主轴为垂直方向，起点在上沿。
      column-reverse：主轴为垂直方向，起点在下沿。*/
      flex-direction: row;
      /* 换行 */
      flex-wrap: wrap;

      /* 主轴的排列方式 */
      /*flex-start（默认值）：左对齐
      flex-end：右对齐
      center： 居中
      space-between：两端对齐，项目之间的间隔都相等。
      space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。 */
      justify-content: space-around;
      /* 交叉轴的排列方式
      flex-start：交叉轴的起点对齐。
    flex-end：交叉轴的终点对齐。
    center：交叉轴的中点对齐。
    baseline: 项目的第一行文字的基线对齐。
    stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。 */
      align-items: center;

      /* 多个交叉轴排列 方式 */
      /* align-content: center; */

    }

    li {
      list-style: none;
      width: 80px;
      height: 80px;
      text-align: center;
      background: slateblue;

    }

    ul li:nth-child(5) {
      /* 给子元素的属性 */
      /* 数值越小越靠前 */
      order: -1;
      align-self: flex-end;
    }

    ul li:nth-child(1) {
      order: -2;
      align-self: flex-start;
    }

    ul li:nth-child(4) {
      flex: 1;
    }
  </style>
</head>

<body>
  <ul>
    <li>托儿索</li>
    <li>儿童劫</li>
    <li>提款姬</li>
    <li>小学生之手</li>
    <li>小学僧</li>
    <li>灭霸</li>
    <li>劲夫</li>
  </ul>


</body>

</html>